<template>
  <div class="avatar-card" :style="getAvatarStyle">
    <avatar
      class="avatar-card-img"
      :src="src"
      :rate="21.5 / 18"
      :default-img-type="defaultImgType"
      :style="imgStyle"
      v-bind="$attrs"
    />
    <div v-if="$slots.default" class="avatar-card-name">
      <slot />
    </div>
  </div>
</template>

<script>
import Avatar from './index.vue';
export default {
  name: 'avatar-card',
  components: { Avatar },
  props: {
    src: { default: '' },
    imgStyle: { type: Object, default: () => ({}) },
    defaultImgType: { type: String, default: 'people' },
  },
  computed: {
    getAvatarStyle() {
      const style = {};
      const { width, height } = this.imgStyle;
      if (width) style.width = 'auto';
      if (height) style.height = 'auto';
      return style;
    },
  },
};
</script>

<style lang="less"></style>
